<template>
    <div id="xsnackbar" :class="['x-snackbar-container', show ? 'active' : '']" >
        <v-snackbar v-model="show" @mouseenter="stopSnackbar"
        @mouseleave="startInterval" :open-on-hover="true" :open-on-focus="false" timeout="2000" location="bottom right"
            color="#033" :absolute="true">
            {{ index }}
            <v-icon size="x-small" class="icon" icon="mdi-close"></v-icon>
            <!-- <template>
                <div class="chart-content">
                    <p>Whale #0x18 swap 6,000,000 #USDT for 2,844 #ETH ($6,000,000 USD)</p>
                </div>
            </template> -->
        </v-snackbar>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted } from "vue";
let timerId: any;
const index = ref(0)
const show = ref(true);
onMounted(() => {
    startInterval()
    const mouseDom = document.getElementById('xsnackbar');
    if (mouseDom) {
        // 监听鼠标进入事件
        mouseDom.addEventListener('mouseenter', () => {
            console.log('鼠标进入该元素的范围');
        });

        // 监听鼠标离开事件
        mouseDom.addEventListener('mouseleave', () => {
            console.log('鼠标离开该元素的范围');
        });
    }

})
//终止
function stopSnackbar() {
    console.log('鼠标范围中')
    clearInterval(timerId)
}
function startInterval() {
    console.log('鼠标移出')
    timerId = window.setInterval(() => {
        index.value = index.value+ 1
        show.value = true
    }, 2300)
}
</script>

<style lang="less" scoped>
@keyframes enter-snackbar {
    from {
        opacity: 0.3;
        margin-left: 100%;
        transform: translateX(0);
    }

    to {
        opacity: none;
        margin-left: 0%;
        width: 100%;
    }
}


.x-snackbar-container {
    // .v-snackbar {
    //     min-width: fit-content !important;
    //     background-color: #313131 !important;
    // }

    // .chart-content {
    //     width: 380px;
    // }

    .active {
        :deep(.v-overlay__content) {
            animation: enter-snackbar 0.5s;
            // transition: 250ms all ease;
            // transform: translateY(-200px);
            // min-width: fit-content !important;
            width: 300px !important;
        }
    }
}

:deep(.v-overlay__content) {
    // position: relative;
    // min-width: fit-content !important;
    background-color: #313131 !important;
    bottom: 200px !important;
    // width: 350px;
}
</style>
